<template>
  <div class="zhuce">
    <div class="title">注册信息</div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入姓名" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="form.sex" label="0">男</el-radio>
            <el-radio v-model="form.sex" label="1">女</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
     
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input
          v-model="form.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="password">
            <el-input
          v-model="form.confirmPassword"
          type="password"
          auto-complete="off"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="form.roleIds" placeholder="请选择角色" @change="choosejiaose">
              <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>

        </el-col> -->
      </el-row>
      <el-row>

     <div class="filelist">
     <div class="fileitem" style="margin-top: 20px;" v-for="(item,index) in wenlist" :key="index">
  <div  class="" style="margin-bottom: 10px; font-synthesis: 24px; color: #333;">{{ item.dataName }}</div>

      <el-upload
  class="upload-demo"
  :action="url"
  :on-success="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="1"
  :data="obj"
  :on-exceed="handleExceed"
  :file-list="form.fileList"
  accept=".pdf"
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
     </div>

     </div>
      </el-row>
   
    </el-form>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </div>
</template>

<script>
import { getjiaose, getwenlist } from "@/api/system/zhuce";
// import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios'
export default {
  name: "zhuce",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      url:"",
      fileList: [],
      wenlist:"",

      form: {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        confirmPassword:undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        zhicheng: undefined,
        postIds: [],
        roleIds: undefined,
        fileList:[]

      },
      roleOptions: "",
      rules: {

        nickName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
        roleIds: [
          { required: true, message: "角色不能为空", trigger: "change" }
        ],
         password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],

        // email: [
        //   {
        //     type: "email",
        //     message: "请输入正确的邮箱地址",
        //     trigger: ["blur", "change"]
        //   }
        // ],
        phonenumber: [
          {
            required: true, message: "手机号不能为空", trigger: "blur",
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
      
      },
      obj:{
          data:""
        }
    };
  },
  watch: {

  },
  created() {
    this.jiaose()
    this.url= process.env.VUE_APP_BASE_API + "/system/registeredUser/authenticationDataUserUpload"
  },
  methods: {
    handleRegister() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.loading = true;
          // register(this.registerForm).then(res => {
          //   const username = this.registerForm.username;
          //   this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
          //     dangerouslyUseHTMLString: true,
          //     type: 'success'
          //   }).then(() => {
          //     this.$router.push("/login");
          //   }).catch(() => {});
          // }).catch(() => {
          //   this.loading = false;
          //   if (this.captchaEnabled) {
          //     this.getCode();
          //   }
          // })
        }
      });
    },
    handleRemove(file, fileList) {
        console.log(file, fileList,"123465");
      },
      handlePreview(file) {
        console.log(file,"12315");
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传一个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    choosejiaose() {
      this.obj.data=this.form.roleIds
      this.getlist()
    },
    jiaose() {
      getjiaose({}).then(res => {

        console.log(res)
        this.roleOptions = res.roles

      })
    },
    getlist() {
      //   axios({
      //   method: 'get',
      //   url: 'http://192.168.2.50:80/system/authenticationData/getDataByRoleId/3',
      //   params: {}
      // }).then((res) => {
      //   console.log('数据：', res)
      // })
      let str = this.form.roleIds
      getwenlist(str).then(res => {
        console.log(res)
        this.wenlist=res.data
      })
    },

    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        confirmPassword:undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: undefined
      };
      this.resetForm("form");
    },



    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form,"111")
      this.$refs["form"].validate(valid => {
        if (valid) {
          // if (this.form.userId != undefined) {
          //   updateUser(this.form).then(response => {
          //     this.$modal.msgSuccess("修改成功");
          //   });
          // } else {
          //   addUser(this.form).then(response => {
          //     this.$modal.msgSuccess("新增成功");
          //   });
          // }
        }
      });
    },


  }
};
</script>
<style lang="scss" scope>
.zhuce {
  margin: 0;
  padding: 0;
  width: 800px;
  margin: 100px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;

  .title {
    width: 100%;
    text-align: center;
    font-size: 28px;
    line-height: 100px;
    font-weight: bold;
    color: #333;
  }

  .footer {
    text-align: center;
    margin-top: 20px;
  }
}
</style>